// Vuee.js

class Vuee {
  constructor(options) {
    this.$options = options;
    this.initData();
    this.compile();
  }

  initData() {
    const data = this.$options.data;
    this.$data = typeof data === 'function' ? data() : data || {};

    // Proxy $data properties to Vuee instance
    Object.keys(this.$data).forEach(key => {
      this.proxyData(key);
    });
  }

  proxyData(key) {
    Object.defineProperty(this, key, {
      get() {
        return this.$data[key];
      },
      set(newVal) {
        this.$data[key] = newVal;
      }
    });
  }

  compile() {
    if (this.$options.el) {
      this.$el = document.querySelector(this.$options.el);
      this.update();
    }
  }

  update() {
    const el = this.$el;
    const template = this.$options.template;

    if (template) {
      el.innerHTML = this.compileTemplate(template, this.$data);
    }
  }

  compileTemplate(template, data) {
    return template.replace(/\{\{(.*?)\}\}/g, (_, key) => {
      key = key.trim();
      return data[key];
    });
  }
}

// Export Vuee
export default Vuee;
